<!DOCTYPE html>
<html>
    <head>
        <title>simplegrid</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <script>
            require(["simplegrid/avalon.simplegrid"], function() {
                function getData(n) {
                    var ret = []
                    for (var i = 0; i < n; i++) {
                        ret.push({
                            symbol: Math.random().toString(32).slice(4, 10),
                            price: range(100, 200),
                            change: Math.random().toFixed(2) * (Math.random() > 0.5 ? 1 : -1)
                        })
                    }
                    return ret
                }
                function range(s, b) {
                    return s + Math.floor((b - s) * Math.random())
                }
                var testVM = avalon.define("test", function(vm) {
                    vm.$skipArray = ["pagerVM"]
                    vm.$simplegridAOpts = {
                        columns: ["symbol", "price", "change"],
                        data: getData(10)
                    }


                    vm.pagerVM = null
                    vm.$simplegridBOpts = {
                        columns: ["symbol", "price", "change"],
                        data: [],
                        pageable: true,
                        pager: {
                            perPages : 10,
                            totalItems: 0,
                            onInit: function(vmodel) {
                                testVM.pagerVM = vmodel
                            }
                        }
                    }
                    vm.resetData = function(id) {
                        var data = getData(3);
                        var vmodel = avalon.vmodels[id];
                        testVM.pagerVM.totalItems = data.length
                        vmodel.reRender(data, vmodel)
                    }
                    vm.$skipArray = ["simplegrid"]
                })
                avalon.scan()
            })
        </script>
    </head>
    <body >
        <fieldset ms-controller="test">
            <legend>最简单的例子</legend>
            <div ms-widget="simplegrid, simplegridA, $simplegridAOpts" style="width:99%">

            </div>
            <br />

            <div ms-widget="simplegrid, simplegridB, $simplegridBOpts" style="width:99%">

            </div>
            <button ms-click="resetData('simplegridA')">reset data A</button>
            <button ms-click="resetData('simplegridB')">reset data B</button>
            <pre class="brush:html;gutter:false;toolbar:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;simplegrid&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="../avalon.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            require(["simplegrid/avalon.simplegrid"], function() {
                function getData(n) {
                    var ret = []
                    for (var i = 0; i &lt; n; i++) {
                        ret.push({
                            symbol: Math.random().toString(32).slice(4, 10),
                            price: range(100, 200),
                            change: Math.random().toFixed(2) * (Math.random() &gt; 0.5 ? 1 : -1)
                        })
                    }
                    return ret
                }
                function range(s, b) {
                    return s + Math.floor((b - s) * Math.random())
                }
                avalon.define("test", function(vm) {
                    vm.simplegrid = {
                        columns: ["symbol", "price", "change"],
                        data: getData(10)
                    }
                    vm.$skipArray = ["simplegrid"]
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ms-controller="test" &gt;
       
            &lt;div ms-widget="simplegrid" style="width:70%"&gt;

            &lt;/div&gt;
         
        &lt;/fieldset&gt;
    &lt;/body&gt;
&lt;/html&gt;
            </pre>
        </fieldset>
    </body>
</html>
